import React, { useEffect, useMemo } from 'react';
import { useCurrentNode } from '@/hooks/useCurrentNode';
import { useNodesData, useReactFlow } from '@xyflow/react';
import useDesignerStore from '@/store/Designer';
import { Dropdown, Select, Space } from 'antd';
import EditableTable from '../../common/EditableTable';
import { NodeIcons } from '@/constant';
import { FIELD_TYPE_MAP, FIELD_TYPE_OPTIONS } from '@/constant/icons';

const DataPreprocessData = ({
  dataSource,
  onSelectionChange,
  onChange,
  selectedRowKeys
}) => {
  const { drawerHeight } = useDesignerStore()
  const columns = [
    {
      title: '序号',
      editable: false,
      width: 50,
      render: (_, record, idx) => <div style={{ direction: 'rtl' }}>{idx + 1}</div>
    },
    {
      title: '字段原名',
      dataIndex: 'columnName',
      width: '25%',
      editable: true,
    },
    {
      title: '字段类型',
      dataIndex: 'columnType',
      inputType: 'select', // 下拉框
      editable: true,
      selectOptions: FIELD_TYPE_OPTIONS
    },
    {
      title: '字段处理',
      render: (_, record) => <Space>
        <a>值替换</a>
        <a>拆分字段</a>
        <a>编辑</a>
      </Space>,
    },
    {
      title: '操作',
      dataIndex: 'operation'
    }
  ];

  return <EditableTable selectedRowKeys={selectedRowKeys} columns={columns} dataSource={dataSource}
    onSelectChange={onSelectionChange} size={{ y: drawerHeight - 180}}
    onChange={onChange} rowKey='columnId'
  />
};
export default DataPreprocessData;